<template>
    <div id="app-box">

        <transition :name='routerAnim' :mode="routerMode">
            <router-view class="router" v-if='initLoaded'></router-view>
        </transition>

        <!-- <share v-show='share.show'></share> -->

        <loading mode="fullscreen" v-show="loading.loadingShow" :title='loading.loadingTitle'></loading>

        <msg-tip :text='msgTip.text' :type='msgTip.type' v-show='msgTip.show' :style-info='msgTip.style'></msg-tip>

        <!-- <notice></notice> -->

        <!-- <modal class='component-image-view' 
            :show='watchShow' 
            @close='watchShow = false'
            width='90%'>
            <div class='component-image-view__content'><img src="../images/watch.png"></div>
        </modal> -->

        <!-- <confirm 
            :show='show_modal_report && notApp'
            @close='show_modal_report = false'
            @confirm='goReport'
            @cancle='cancle'
            :confirmText='modalReportConfirmText'
            :closeText='modalReportCloseText'
            title='提示'
            :tips='modalReportTips'></confirm> -->
    </div>
</template>
<script>
    import { Promise } from 'es6-promise'
    import client from '../utils/client'
    import loading from '../components/Loading.vue'
    import msgTip from '../components/MsgTip.vue'
    import footerBar from '../components/FooterBar.vue'
    import goHome from '../components/GoHome.vue'
    import share from '../components/Share.vue'
    import notice from '../components/Notice.vue'
    import confirm from '../components/Confirm.vue'
    import modal from '../components/Modal.vue'
    import { loginApi, indexApi } from '../api/api'
    import { getOS, getQueryString, getScript } from '../utils/utils'
    // import mixinUserInfo from '../mixins/mixin-userInfo'
    import  { mapGetters, mapActions }  from 'vuex'

    export default {
        // mixins: [mixinUserInfo],
        components:{
            loading,
            msgTip,
            footerBar,
            goHome,
            modal,
            share,
            notice,
            confirm
        },
        methods:{
            ...mapActions([
                'setUserId',
                'setDocumentClick',
                'showLoading',
                'hideLoading',
                'setConfigInfo'
            ]),
            init(){
                indexApi.bindUser()
                this.initLoaded = true
            },
        },
        data(){
            return {
                notApp:getQueryString().from != 'app',
                os:getOS(),
                watchShow:false,
                initLoaded:false,
            }
        },
        computed:{
            ...mapGetters([
                'loading',
                'msgTip',
                'localInfo'
            ]),
            documentClick(){
                return this.localInfo.documentClick
            },
            routerAnimation(){
                return this.localInfo.routerAnimation
            },
            routerAnim(){
                if(this.os == 'Android'){
                    return ''
                }
                if(this.os != 'Android'){
                    return this.routerAnimation
                }
            },
            routerMode(){
                if(this.os == 'Android'){
                    return 'out-in'
                }
                if(this.os != 'Android'){
                    return ''
                }
            },
            share(){
                return this.localInfo.share
            },
        },
        created(){
            console.log(this.localInfo)
            this.showLoading()
            this.setConfigInfo()
            .then(result=>{
                this.hideLoading()
                this.init()
            })
            .catch(error=>{
                this.hideLoading()
                console.error(error)
            })
        },
    }
</script>

<style lang="scss">
    @import "../sass/common";
    body{
        .yidun_popup .icon-close:before{
            display: none;
        }
        .back-home{
            @extend %font-caption;
            text-align: center;
            color:$blue;
            margin-top: 8px;
            padding: 6px;
        }
        .slogen{
            padding: 12px 24px;
            background-color: #fff;
            display: flex;
            justify-content: space-around;
            margin-top: 16px;
        }
        .recommend-filter-loading{
            width: 50px;
            height: 48px;
        }
        .slogen__item{
            padding-left:8px;
            display: flex;
            box-sizing:border-box;
            text-align: center;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color:$grayLight;
            img{
                width: 24px;
                height: 24px;
                margin-right: 4px;
            }
            &:first-child{
                padding-left: 0;
            }
        }
        .recommend-toolbar{
            display: flex;
            align-items: center;
            background-color: #fff;
            border-bottom: 1px solid $sectionColor;
            position: relative;
        }
        .recommend-toobar__total{
            display: block;
            @extend %font-caption;
            flex:1;
            padding:0 16px;
        }
        .recommend-toobar__select{
            @extend %font-body2;
            color:$importColor;
            position: relative;
            &.filter{
                padding:11px 48px 11px 16px;
                &:before{
                    @include triangle(10px,$defaultColor,bottom)
                    content:'';
                    position: absolute;
                    top:50%;
                    margin-top:-2.5px;
                    right:24px;
                }
            }
            &:after{
                content:'';
                position: absolute;
                border-left: 1px solid $sectionColor;
                height: 16px;
                top:50%;
                margin-top:-8px;
                right:0px;
            }
            &:last-child{
                &:after{
                    border-left: none;
                }
            }
        }
        .recommend-list-title{
            display: flex;
            align-items: center;
            background-color: #fff;
            padding: 12px 16px;
            .avatar{
                display: block;
                width: 32px;
                height: 32px;
            }
            p{
                @extend %font-subhead;
                color:$importColor;
                flex:1;
                padding-left: 16px;
            }
            .history{
                display: block;
                width: 24px;
                height: 24px;
            }
        }
        .banner-box{
            position: relative;
            margin: 8px 16px;

            .chat{
                position: absolute;
                z-index:2;
                right:0;
                top:0;
                padding: 8px;
                img{
                    width: 40px;
                    height: 40px;
                }
                .unread{
                    position: absolute;
                    right:4px;
                    top:4px;
                    min-width: 14px;
                    padding:0 4px;
                    height: 14px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 7px;
                    font-size: 8px;
                    box-sizing: border-box;
                    background-color: $red;
                    color:#fff;
                }
            }
        }
        .banner__item{
            padding-top:39%;
            width: 100%;
            position: relative;
            img{
                position: absolute;
                left:0;
                top:0;
                width: 100%;
            }
        }
        .user-operation{
            display: flex;
        }
        .user-operation__item{
            text-align: center;
            margin-left: 16px;
            &:first-child{
                margin-left: 0;
            }
        }
        .user-operation__logo{
            display: inline-block;
            width: 24px;
            height: 24px;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 24px auto;
            margin-bottom: 4px;
            &.contact{
                background-image: url(../images/contact_add.png);
            }
            &.chat{
                background-image: url(../images/contact_chat.png);
            }
            &.report{
                background-image: url(../images/user_report.png);
            }
        }
        .confirm-textarea{
            width: 100%;
            border:1px solid $sectionColor;
            -webkit-appearance:none;
            resize:none;
            padding:15px;
            box-sizing:border-box;
            border-radius:2px;
            margin-top: 16px;
        }
        .recommend-title{
            padding:11px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            @extend %font-body2;
            border-bottom:1px solid $sectionColor;
            p{
                color:$importColor;
            }
            .recommend-switch{
                color:$orange;
            }
        }
        .loan-index-mine{
            display: flex;
            align-items: center;
            padding:12px 16px;
            background-color: #fff;
            position: relative;
            .icon-arrow{
                padding-left: 10px;
            }
            &:before{
                content:'';
                position: absolute;
                left:16px;
                right:16px;
                top:0;
                border-top:1px solid $sectionColor;
            }
            img{
                width: 32px;
                height: 32px;
            }
            .loan-index-mine__mid{
                @extend %font-subhead;
                color:$importColor;
                padding-left: 16px;
                flex:1;
                .font-title{
                    color:$orange;
                    &.purple{
                        color:$purple
                    }
                }
                .font-subhead{
                    color:$importColor;
                }
            }
            .loan-index-mine__right{
                @extend %font-caption;
                text-align: right;
                span{
                    color:$orange;
                }
                .time {
                    color:$defaultColor;
                    display: flex;
                    justify-content: flex-end;
                }
            }
        }
        .want-loan__button{
            display: flex;
            justify-content: center;
            padding:22px;
            background-color: #fff;
        }
        .want-loan__ing{
            display: flex;
            justify-content: center;
            padding: 10px 16px;
            position: relative;
            background-image:linear-gradient(-180deg, rgba(255,255,255,1) 0%, #f5f5f5 100%);
            &:before{
                content:'';
                position: absolute;
                left:16px;
                right:16px;
                top:0;
                border-top:1px solid $sectionColor;
            }
        }
        .offer-tag{
            border:1px solid $red;
            border-radius:2px;
            height:16px;
            line-height:16px;
            color:$red;
            padding:0 4px;
            margin-left: 5px;
        }
        .recommend-title{
            background-color: #fff;
        }
        .recommend__avatar{
            width: 32px;
            height: 32px;
            border-radius: 50%;
        }
        .recommend-box{
            margin-bottom: 10px;
            overflow:hidden;
        }
        .recommend-swtich-button{
            color:$orange;
        }
        .switch-loading{
            width: 36px;
            position: relative;
        }
        .title-number{
            color:$orange;
        }
        .title-switch{
            color:$orange;
        }
        .recommend{
            overflow:hidden;
            border-radius: 2px;
            background-color: #fff;
            margin-bottom: -1px;
        }
        .recommend__item{
            float:left;
            width: 50%;
            box-sizing:border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            padding:12px 0;
            background-color: #fff;
            text-align: center;
            border-bottom:1px solid $sectionColor;
            position: relative;
            &:after{
                content:'';
                position: absolute;
                top:10px;
                bottom:10px;
                right:0;
                border-right: 1px solid $sectionColor;
            }
            &:nth-child(2n){
                &:after{
                    border-right: none;
                }
            }
            &:active{
                background-color: rgba(#000,.01);
            }
            .mid{
                display: flex;
                align-items: center;
                flex:1;
                img{
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    &.contact{
                        width: 16px;
                        height: 16px;
                        border-radius:0;
                        margin-left: 4px;
                    }
                }
                p{
                    padding-left: 8px;
                    @extend %font-caption;
                    color:$importColor;
                }
            }
            i{
                @extend %font-caption;
                display: block;
                width: 64px;
                line-height: 32px;
                color: $orange;
                border:1px solid $orange;
                border-radius:2px;
                &.purple{
                    color:$purple;
                    border-color:$purple;
                }
            }
        }
        .recommend__lend-amount{
            display: block;
            @extend %font-subhead;
            width: 44%;
            color:$importColor;
            text-align: left;
        }
        .have-footer{
            padding-bottom: 100px;
            overflow:auto;
            -webkit-overflow-scrolling: touch;
        }
        .modal-qr{
            text-align:center;
            p{
                color:$importColor;
            }
        }
        .modal-tips{
            @extend %font-body1;
            color:$importColor;
            p{
                padding-top: 10px;
                &:first-child{
                    padding-top: 0;
                }
            }
        }
        .form__agreement{
            padding: 16px 16px 24px 24px;
            em{
                font-weight: normal;
            }
        }
        .form__agreement-text{
            @extend %font-caption;
            display: block;
            color:$importColor;
        }
        .page-placeholder{
            padding:80px;
            height:80px;
            background: url(../images/placeholder.png) no-repeat center center;
            background-size: 52px 73px;
            position: relative;
            span{
                @extend %font-caption;
                position: absolute;
                bottom:45px;
                left:50%;
                transform:translate(-50%,0);
            }
        }
        .success__logo{
            width: 96px;
            height: 96px;
        }
        .success__title{
            @extend %font-subhead;
            text-align: center;
            color:$importColor;
            padding-top: 16px;
        }
        .success__tips{
            @extend %font-caption;
            padding: 16px;
        }
        .footer-button{
            position: absolute;
            bottom:0;
            left:0;
            right:0;
            display: flex;
            background-color: #fff;
            justify-content:center;
            padding:18px 20px;
            box-shadow:0 0 8px 0 rgba(0,0,0,0.12);
            .button{
                margin:0;
                margin-left:16px;
                &:first-child{
                    margin-left: 0;
                }
            }
        }
        .single-button{
            position: absolute;
            bottom:0;
            left:0;
            right:0;
            padding-bottom: 22px;
            padding-top: 14px;
            background-image:linear-gradient(-180deg, rgba(245,245,245,0.00) 0%, #f5f5f5 75%);
        }

        .steps{
            display: flex;
            background-color: #fff;
            padding:24px 36px 16px 36px;
            justify-content: center;
            text-align: center;
        }
        .steps__item{
            width: 20%;
            flex:1;
            position: relative;
            &:before{
                content:'';
                position: absolute;
                left:0;
                width: 100%;
                top:15px;
                border-top:1px solid $sectionColor;
            }
            &:first-child{
                &:after{
                    content:'';
                    position: absolute;
                    left:0;
                    width: 50%;
                    top:15px;
                    border-top:1px solid #fff!important;
                    z-index:2
                }
            }
            &:last-child{
                &:after{
                    content:'';
                    position: absolute;
                    right:0;
                    width: 50%;
                    top:15px;
                    border-top:1px solid #fff!important;
                    z-index:2
                }
            }
            &.active{
                span{
                    color:#fff;
                    background-color: $orange;
                }
                p{
                    color:$orange;
                }
                &:before{
                    border-color:$orange;
                }
            }
            span{
                display: inline-block;
                width: 32px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                border-radius: 50%;
                background-color:#E0E0E0;
                color:$importColor;
                position: relative;
                z-index:3;
            }
            p{
                padding-top: 8px;
            }
        }
        .loan-detail-content{
            position: relative;
        }
        .loan-detail-info{
            border-top:1px solid $sectionColor;
            padding-bottom: 10px;
        }
        .loan-detail-message{
            position: relative;
            min-height:48px;
            width: 100%;
        }
        .loan-detail-message__box{
            @extend %font-caption;
            width: 80%;
            height:72px;
            box-sizing:border-box;
            position: absolute;
            right:0;
            bottom:-16px;
            box-shadow:0 0 4px 0 rgba(0,0,0,0.12), 0 4px 4px 0 rgba(0,0,0,0.12);
            background-color: #757575;
            padding: 16px;
            color:#fff;
            .swiper-slide{
                @include multiLine-overflow(2);
            }
        }
        .big-title{
            @extend %font-body2;
            padding:0 24px;
            height:48px;
            display: flex;
            justify-content: space-between;
            align-items:center;
            span{
                display: block;
                @extend %font-caption;
            }
        }
        .loan-demand{
            text-align: right;
        }
        .loan-demand__text{
            @extend %font-body1;
            padding-top: 9px;
            color:$orange;
        }
        .loan-demand__time{
            @extend %font-caption;
            display: flex;
            justify-content: flex-end;
        }
        .loan-detail-agreement{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:8px 0 0px 0;
            span{
                border:none;
                box-shadow:none;
                box-sizing:content-box;
                padding:6px 0;
            }
            .detail-button{
                @extend %font-caption;
                line-height:48px;
                color:$importColor;
                position: relative;
                padding-right: 22px;
                &.active{
                    &:before{
                        transform:rotate(180deg);
                    }
                }
                &:before{
                    @include triangle(10px,$defaultColor,bottom);
                    content:'';
                    position: absolute;
                    right:0px;
                    top:50%;
                    margin-top:-2.5px;
                }
            }
        }
        .loan-detail-info__pics{
            display: flex;
            padding: 8px 0;
        }
        .loan-detail-info__pic{
            width: 17%;
            padding-top: 17%;
            position: relative;
            // background-color: $sectionColor;
            margin-left:8px;
            overflow:hidden;
            &:first-child{
                margin-left:0;
            }
            img{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
            }
        }
        .loan-detail-data{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .loan-detail-button{
            color:$importColor;
            @extend %font-caption;
            padding-left: 6px;
        }
        .loan-detail-money__list{
            display: flex;
            padding: 9px 0;
            flex:1;
        }
        .loan-detail-money__item{
            @extend %font-caption;
            width: 30%;
            flex:1;
            text-align: center;
            .persent{
                @extend %font-subhead;
                color:$importColor;
            }
        }
        .loan-detail-money__total{
            display: flex;
            align-items:center;
            justify-content:space-between;
            .text{
                @extend %font-body1;
                color:$importColor;
            }
            .number{
                @extend %font-title;
                color:$orange;
                &.purple{
                    color:$purple;
                }
            }
        }
        .loan-detail-header{
            background-color: #fff;
            padding: 0 24px 8px 24px;
        }
        .loan-detail-number{
            @extend %font-caption;
            display: flex;
            justify-content: space-between;
            padding:16px 0 0 0;
        }
        .loan-detail-number__status{
            display: flex;
            &.orange{
                color:$orange;
            }
            &.purple{
                color:$purple;
            }
        }
        .loan-detail-money__total-true{
            padding: 8px 0 12px 0;
            text-align: right;
            p{
                @extend %font-caption;
                padding: 0 0 0 4px;
            }
            span{
                display: inline-block;
                @extend %font-caption;
                color:$importColor;
            }
        }
        .loan-detail-user{
            display: flex;
            align-items:center;
            margin-left:-6px;
            margin-right:-6px;
            margin-bottom: 8px;
            height:80px;
            position:relative;
            &:after{
                content:'';
                position: absolute;
                right:6px;
                left:6px;
                bottom:0;
                border-top:1px solid $sectionColor;
            }
        }
        .loan-detail-user__avatar{
            display: block;
            width: 38px;
            height: 38px;
            border:1px solid $sectionColor;
            border-radius:50%;
            img{
                width: 100%;
                height: 100%;
                border-radius:50%;
            }
        }
        .loan-detail-user__info{
            padding-left: 16px;
            flex:1;
            @extend %font-caption;
            .name{
                @extend %font-body1;
                color:$importColor;
            }
        }
        .loan-detail-user__button{
            @extend %font-button;
            color:$importColor;
            box-shadow:0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.12);
            border-radius:2px;
            width:91px;
            height:36px;
            line-height: 36px;
            text-align: center;
        }
        .loan-detail-info__time{
            color:$orange;
        }
        .fundraising-info{
            .font-body1{
                color:$orange;
                text-align: right;
            }
            .font-caption{
                display: flex;
            }
        }
        .loan-user-info{
            display: flex;
            align-items:center;
        }
        .loan-user-info__avatar{
            display: block;
            width: 40px;
            height: 40px;
            margin-right: 16px;
            border-radius:50%;
            border:1px solid rgba(#000,.12);
            img{
                width: 100%;
                height:100%;
                border-radius:50%;
            }
        }
        .loan-user-info__box{
            flex:1;
        }
        .loan-user-info__name{
            @extend %font-body1;
            color:$importColor;
        }
        .loan-user-info__phone{
            @extend %font-caption;
        }
        .loan-current{
            padding-top: 10px;
            color:$orange;
            display: flex;
            justify-content: space-between;
            align-items:flex-end;
            .purple{
                color:$purple;
            }
        }
        .loan-current__money{
            display: flex;
            align-items:flex-end;
        }
        .loan-current__text{
            @extend %font-caption;
            display: block;
            padding-bottom: 5px;
            padding-right: 8px;
        }
        .loan-current__button{
            @extend %font-button;
            transition:background ease .3s;
            display: block;
            background:#ffffff;
            box-shadow:0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.12);
            border-radius:2px;
            width:91px;
            line-height:35px;
            text-align: center;
            &:active{
                background-color: darken(#fff,3%);
            }
        }
        .loan-current__number{
            @extend %font-headline;
        }
        .card__header{
            display: flex;
            justify-content:space-between;
            align-items:center;
            padding-bottom: 7px;
            border-bottom:1px solid rgba(#000,.12);
            &.no-border{
                border:none;
            }
        }
        .card__info{
            display: flex;
            flex-wrap: wrap;
            padding-top: 6px;
            overflow:auto;
        }
        .card__info-item{
            @extend %font-caption;
            padding-top: 4px;
            width: 50%;
            box-sizing:border-box;
            &.full{
                width: 100%;
            }
            &.orange{
                color:$orange;
            }
            .orange{
                color:$orange;
            }
        }
        .card__buttons{
            display: flex;
            justify-content:flex-end;
            padding-top: 14px;
        }
        .card__button{
            &.short{
                margin-right: 16px;
                &:last-child{
                    margin-right: 0;
                }
            }
        }
        .loan-number{
            @extend %font-caption;
            padding-bottom: 8px;
        }
        .loan-out-info{
            display: flex;
        }
        .loan-out-data{
            @extend %font-caption;
            padding-top: 16px;
            span{
                color:$orange;
            }
        }
        .loan-out-info__item{
            width: 30%;
            flex:1;
            text-align: center;
            padding: 9px 0;
            border-bottom: 1px solid $sectionColor;
            p{
                @extend %font-subhead;
                color:$importColor;
            }
            span{
                display: block;
                @extend %font-caption;
            }
        }
        .loan-money{
            flex:1;
        }
        .loan-money__amount{
            @extend %font-title;
            &.orange{
                color:$orange;
            }
            &.purple{
                color:$purple;
            }
        }
        .loan-money__info{
            @extend %font-subhead;
            i{
                display: inline-block;
                padding-right:9px;
            }
            &.loan-out{
                @extend %font-body1;
                color:$importColor;
            }
        }
        .money-amount-header{
            display: flex;
            align-items:flex-start;
            text-align:left;
            padding:32px 24px;
            color:#fff;
            position: relative;
            &.loan-in{
                background-color: $orange;
            }
            &.loan-out{
                background-color: $purple;
            }
        }
        .money-amount-header__left{
            .font-headline{
                font-size:34px;
            }
            .font-caption{
                color:rgba(#fff,.7);
            }
        }
        .money-amount-header__right{
            @extend %font-caption;
            color:$defaultColor;
            display: flex;
            align-items: center;
            padding:3px 4px 3px 3px;
            margin-top: 6px;
            margin-left: 8px;
            border-radius:12px;
            background-color: $grayLight;
            img{
                width: 18px;
                height: 18px;
            }
            p{
                @extend %font-caption;
                padding:0 4px;
                color:#fff;
            }
            .iconfont{
                display: block;
                font-size:14px;
                width: 14px;
                line-height:14px;
            }
        }
        .money-amount-footer{
            display: flex;
            position: relative;
            background-color: #fff;
            .font-headline{
                color:$importColor;
            }
            &:after{
                content:'';
                height:32px;
                position: absolute;
                left:64%;
                top:50%;
                border-right:1px solid rgba(#000000,.12);
                margin-top:-16px;
            }
        }
        .money-amount-footer__left{
            width: 64%;
            display: flex;
            justify-content:center;
            text-align:center;
            padding:9px 0;
            .font-headline{
                font-size:17px;
            }
            .money-amount-footer__item{
                &:last-child{
                    margin-left:36px;
                }
            }
        }
        .money-amount-footer__right{
            flex:1;
            display: flex;
            align-items:center;
            justify-content:center;
            text-align: center;
        }
        .message{
            position: relative;
            height:32px;
            background-color: #C5CAE9;
            display: flex;
            align-items: center;
            &.borrow{
                background-color:#FFCCBC;
            }
            .swiper-container{
                flex:1;
            }
            .icon-close-pure{
                font-size: 20px;
                padding:10px;
                color:$importColor;
            }
        }
        .message__item{
            display: flex;
            align-items:center;
        }
        .message__avatar{
            position: absolute;
            width: 24px;
            height: 24px;
            border:1px solid rgba(#000,.12);
            background-color: #fff;
            border-radius:50%;
            left:16px;
            bottom:3px;
            img{
                border-radius:50%;
                width: 100%;
                height: 100%;
            }
        }
        .message__text{
            @extend %font-caption;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            padding: 0 11px 0 58px;
        }
        .card{
            margin:0 16px 16px 16px;
            background-color: #fff;
            box-shadow:0 0 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12);
            border-radius:4px;
            padding:16px 16px 16px 24px;
            position: relative;
            &:after{
                display: none;
                content:'';
                width: 16px;
                height: 24px;
                position: absolute;
                right:5px;
                top:-10px;
            }
            &.no-margin{
                margin:0;
                box-shadow:none;
            }
            &.pen:after{
                display: block;
                background: url(../images/pen.png) no-repeat center center;
                background-size: auto 24px;
            }
            &.nail1:after{
                display: block;
                background: url(../images/nail1.png) no-repeat center center;
                background-size: auto 24px;
            }
            &.nail2:after{
                display: block;
                background: url(../images/nail2.png) no-repeat center center;
                background-size: auto 24px;
            }
            &.nail3:after{
                display: block;
                background: url(../images/nail3.png) no-repeat center center;
                background-size: auto 24px;
            }
            &.nail4:after{
                display: block;
                background: url(../images/nail4.png) no-repeat center center;
                background-size: auto 24px;
            }
            &.nail5:after{
                display: block;
                background: url(../images/nail5.png) no-repeat center center;
                background-size: auto 24px;
            }
        }
        .card__share{
            padding-top: 14px;
            display: flex;
            justify-content: flex-end;
        }
        .loading-min-height{
            min-height:140px;
            position: relative;
        }
        .no-data{
            padding:20px;
            text-align:center;
        }
        .card-title{
            font-size: 18px;
            font-weight: normal;
            padding-bottom:15px;
            border-bottom:1px solid $sectionColor;
            color:$importColor;
            padding-top: 46px;
            position: relative;
            display:flex;
            align-items:center;
            justify-content:space-between;
        }
        .card-title__button-box{
            display: flex;
        }
        .card-title__button{
            cursor:pointer;
            line-height:32px;
            color:#fff;
            background-color: $green;
            padding:0 15px;
            margin-left:10px;
            border-radius:3px;
            text-align:center;
            font-size: 13px;
            font-weight: normal;
            font-weight: 300;
            transition:ease .3s all;
            &:hover{
                background-color: darken($green,10%);
            }
        }
        // form
        .form-box{
            margin-top:16px;
            &.auto{
                width: auto;
                margin: 0;
            }
            &.transparent{
                background-color: transparent;
                border:none;
            }
        }
        .form-content{
            background-color: #fff;
        }
        .form__item{
            font-size:12px;
            display:flex;
            align-items:center;
            width:100%;
            box-sizing:border-box;
            background-color: #fff;
            position: relative;
            text-align:right;
            .icon-arrow{
                position: absolute;
                right:21px;
                top:50%;
                margin-top:-8px;
            }
            &.has-arrow{
                padding-right: 16px;
            }
            &:last-child{
                &:after{
                    display: none;
                }
            }
            &:after{
                content:'';
                position: absolute;
                bottom:0;
                left:16px;
                right:16px;
                border-top:1px solid $sectionColor;
            }
            &.detail{
                
            }
            &.select{
                padding-right: 16px;
                &:before{
                    @include triangle(10px,rgba(#000,.38),bottom)
                    content:'';
                    position: absolute;
                    top:50%;
                    margin-top:-2.5px;
                    right:16px;
                }
            }
            &.disabled{
                padding-right: 0px;
                &:before{
                    display: none;;
                }
                .form__key{
                    color:$grayLight;
                }
                .form__value{
                    .item{
                        color:$grayLight;
                    }
                }
            }
        }
        .form__key{
            @extend %font-subhead;
            color:$importColor;
            padding:15px 10px 15px 16px;
            display:block;
            position: relative;
            display: flex;
            align-items:center;
            .info{
                display: block;
                margin-left: 8px;
                background:url('../images/ic_info_black_24px.png') no-repeat center center;
                background-size:18px 18px;
                width: 18px;
                height: 18px;
            }
        }

        .form__value{
            position: relative;
            flex:1;
            display:flex;
            justify-content:space-between;
            align-items:center;
            box-sizing:border-box;
            &.disabled{
                input,select,textarea,.item{
                    color:$grayLight;
                }
            }
            input,select,textarea,.item{
                display: block;
                @extend %font-body1;
                color:$importColor;
                text-align:right;
                width: 100%;
                box-sizing:border-box;
                padding:15px 16px 15px 16px;
            }
            textarea{
                resize:none;
                text-align:left;
            }
            &.text-left{
                input{
                    text-align: left;
                }
            }
        }
        .form-item__text{
            padding:19px 0;
            &.no-choose{
                color:$disabledColor;
            }
        }
    }


</style>
